<script setup lang="ts">
import AppTable from "@/components/app/AppTable.vue";
import {confirm, alertSuccess} from "@/utils/alert.ts";
import {removeDept, saveDept, updateDept} from "@/api/system";
import {ref} from "vue";
import type {IDeptSaveParams, IDeptUpdateParams} from "@/types";

defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Dept"
})
const tableRef = ref()
const dialogTableVisible = ref<boolean>(false)
const dialogTableType = ref<'edit' | 'save'>('edit')
const selected = ref({})
const saveParams = ref<IDeptSaveParams>({} as IDeptSaveParams)
const updateParams = ref<IDeptUpdateParams>({} as IDeptUpdateParams)

const open = (type: 'edit' | 'save', row: any) => {
  saveParams.value = {} as IDeptSaveParams
  updateParams.value = {} as IDeptUpdateParams
  selected.value = row
  dialogTableType.value = type
  if (type === 'save') {
    dialogTableVisible.value = true
    saveParams.value.parentId = row.key
    if (row.children) {
      const last = row.children[row.children.length - 1]
      saveParams.value.sortNum = last.sortNum + 1
    } else {
      saveParams.value.sortNum = 1
    }
  } else if (type === 'edit') {
    dialogTableVisible.value = true
    updateParams.value.id = row.key
    updateParams.value.deptName = row.title
    updateParams.value.parentId = row.parentId
    updateParams.value.sortNum = row.sortNum
  }
}

const handleSaveSub = () => {
  saveDept(saveParams.value).then(() => {
    dialogTableVisible.value = false
    tableRef.value.queryData()
    alertSuccess('保存成功')
  })
}

const handleEdit = () => {
  updateDept(updateParams.value).then(() => {
    dialogTableVisible.value = false
    tableRef.value.queryData()
    alertSuccess('修改成功')
  })
}
const handleDelete = (id: string) => {
  confirm('确定要删除吗？', async () => {
    await removeDept(id)
    tableRef.value.queryData()
    alertSuccess('删除成功')
  })
}

</script>

<template>
  <div>
    <AppTable
      ref="tableRef"
      title="部门管理"
      row-key="key"
      :search-info="[
  {
    label: '部门名称',
    key: 'deptName',
    value: ''
  },
]"
      :btn-show="{
      add: false,
      edit: false,
      delete: false,
      export:false,
      import:false
    }"
      :pageable="false"
      api-method="get"
      api-path="/api/sys/dept/list"
      @multiple-selection="data => {console.log( data)}">
      <template v-slot:actionBar>
      </template>
      <template v-slot:tableColumn>
        <el-table-column prop="title" label="部门名称" align="left"/>
        <el-table-column prop="sortNum" label="排序" width="100" align="left"/>
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <el-button link type="primary" size="small" icon="Edit"
                       @click="open('edit',scope.row)">
              编辑
            </el-button>
            <el-button link type="primary" size="small" icon="CirclePlusFilled"
                       @click="open('save',scope.row)">
              添加子部门
            </el-button>
            <el-button v-if="scope.row.parentId" link type="danger" size="small" icon="Delete"
                       @click="handleDelete(scope.row.key)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </AppTable>

    <el-dialog v-model="dialogTableVisible"
               width="500px"
               :title="dialogTableType==='edit'?'编辑':'添加子部门'">
      <el-form label-width="120px" v-if="dialogTableType==='edit'">
        <el-form-item label="部门名称">
          <el-input v-model="updateParams.deptName"/>
        </el-form-item>
        <el-form-item label="部门排序">
          <el-input-number style="width: 100%" v-model="updateParams.sortNum"
                           controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit">保存</el-button>
        </el-form-item>
      </el-form>

      <el-form label-width="120px" v-if="dialogTableType==='save'">
        <el-form-item label="所属部门">
          <el-input disabled v-model="selected.title"/>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input v-model="saveParams.deptName"/>
        </el-form-item>
        <el-form-item label="部门排序">
          <el-input-number style="width: 100%" v-model="saveParams.sortNum"
                           controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSaveSub">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<style scoped>

</style>
